<style lang="scss">
  @import "../utils/base.scss";

  td.ivu-table-expanded-cell {
    background-color: #ffffff;
  }
</style>
<template>
  <div style="height:calc(100vh - 94px);background-color:#FFFFFF;overflow-y:auto;overflow-x:hidden;">
    <div class="qheader">
      <p>网络策略管理</p>
    </div>
    <div class="gcontent">
      <Form :model="searchInfo" :label-width="100" label-position="left"
        style="position:relative;left:4%;padding-bottom: 10px">
        <Row>
          <Col span="8">
          <FormItem label="姓名:">
            <Input v-model="searchInfo.applyContact" style="width:70%" />
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="网络申请类型:">
            <Select v-model="searchInfo.serviceType" style="width:70%">
              <Option v-for="item in netTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          </Col>
          <!--                     <Col span="8" >
                        <FormItem label="一级4A主账号:">
                            <Input v-model="searchInfo.fourA" style="width:70%"/>
                        </FormItem>
                    </Col> -->
        </Row>
        <Row>
          <Col span="8">
          <FormItem label="资源池:">
            <Input v-model="searchInfo.oriPool" style="width:70%" />
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="策略类型:">
            <Input v-model="searchInfo.netType" style="width:70%" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
          <FormItem label="工单号:">
            <Input v-model="searchInfo.reqId" style="width:70%" />
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="工单标题:">
            <Input v-model="searchInfo.reqSubject" style="width:70%" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
          <FormItem label="租户和项目:">
            <Cascader :data="projectList" filterable :transfer="true" style="width:70%" @on-change="selectProject">
            </Cascader>
          </FormItem>
          </Col>
          <Col span="13">
          <FormItem label="策略申请日期:">
            <DatePicker :options="disabledDate" v-model="startDate" type="date" placeholder="Select date"
              style="width:38%" @on-change="startDateFormat"></DatePicker>
            <span>-</span>
            <DatePicker :options="disabledDate" v-model="endDate" type="date" placeholder="Select date"
              style="width:38%" @on-change="endDateFormat"></DatePicker>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
          <FormItem label="工单状态:">
            <Select v-model="searchInfo.status" style="width:70%">
              <Option v-for="item in staticList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          </Col>
        </Row>
        <Row style="padding-bottom: 10px">
          <Col span="8">
          <Button type="primary" style="width:5vw;" @click="search(searchInfo.current,0)">查找</Button>
          <Button type="primary" @click="exportData()">导出数据</Button>
          </Col>
        </Row>
        <Row>
          <Col span="22" style="width: 92.3%;">
          <Table border :columns="columns" :data="netInfo" ref="table">
            <template slot-scope="{row, index}" slot="status">
              <div v-for="(item,index) in staticList" :key="index">
                <p v-if="item.value==row.status">{{item.label}}</p>
              </div>
            </template>
            <template slot-scope="{row, index}" slot="action">
              <Button type="primary" @click="toPage(row)">详情</Button>
            </template>
          </Table>
          <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
              <Page :current="searchInfo.current" :total=total show-total show-elevator show-sizer
                @on-change="search($event,1)" @on-page-size-change="changePageSize"></Page>
            </div>
          </div>
          </Col>
        </Row>
      </Form>
    </div>
  </div>
</template>
<script>
  import ajax from "../ajax_util"
  import Axios from 'axios'
  import network from './applyVue/apply_network.vue'

  export default {
    components: {
      network
    },
    data() {
      return {
        disabledDate: {
          disabledDate(date) {
            return date && date.valueOf() > 4070880000000;
          }
        },
        columns: [
          // {
          //     type: 'expand',
          //     width: 50,
          //     render: (h, params) => {
          //         return h(expandRow, {
          //             props: {
          //                 row: params.row
          //             }
          //         })
          //     }
          // },
          {
            title: '姓名',
            key: 'applyContact'
          },
          {
            title: '一级4A主账号',
            key: 'fourA'
          },
          {
            title: '租户',
            key: 'tarSys'
          },
          {
            title: '项目',
            key: 'tarSysContact'
          },
          {
            title: '源资源池',
            key: 'oriPool'
          },
          {
            title: '目的资源池',
            key: 'tarPool'
          },
          {
            title: '策略类型',
            key: 'netType'
          },
          {
            title: '工单号',
            key: 'reqId'
          },
          {
            title: '工单标题',
            key: 'reqSubject'
          },
          {
            title: '策略申请日期',
            key: 'startDate'
          },
          {
            title: '工单状态',
            slot: 'status',
            // key:'status'
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
          }
        ],
        startDate: "",
        endDate: "",
        searchInfo: {
          applyContact: "",
          fourA: "",
          oriPool: "",
          netType: "",
          startTime: "",
          deadline: "",
          reqId: "",
          current: 1,
          pageSize: 10,
          reqSubject: "",
          projectId: "",
          serviceType: "net",
          status: "-2",
        },
        netInfo: [],
        tenantList: [],
        projectList: [],
        tabs: {},
        total: 0,
        exportDatas: [],
        netTypeList: [{
            value: "net",
            label: "网络策略"
          },
          {
            value: "netmapping",
            label: "网络映射"
          }
        ],
        staticList: [{
            value: "0",
            label: "进行中"
          },
          {
            value: "-1",
            label: "已完成"
          },
          {
            value: "-2",
            label: "全部"
          }
        ]
      }
    },
    computed: {
      isEdit() {
        return this.$store.state.tabs.isEdit
      }
    },
    mounted: function() {
      this.tabs = this.$store.state.tabs;
      this.getProjects();
      //console.log("------this.tabs----",this.tabs);
    },
    methods: {
      getProjects() {
        var that = this;
        var url = this.CONFIG.url_know + '/listTenantAndProject';
        ajax.get({
          url: url,
          that: that,
          success: function(data) {
            that.projectList = data;
          }
        })
      },
      selectProject(value, selectedData) {
        console.log("====selectProject===", value, selectedData);
        this.searchInfo.projectId = value[1];
      },
      search(page, number) {
        if (number === 0) {
          this.searchInfo.current = 1;
        } else {
          this.searchInfo.current = page;
        }
        //console.log("-----page------",page);
        console.log('search', this.searchInfo)
        this.people = [];
        var that = this;
        var url = this.CONFIG.progress_url + '/net-manager';
        ajax.get({
          url: url,
          that: that,
          params: that.searchInfo,
          success: function(data) {
            console.log("-----data------", data);
            that.total = data.total;
            that.netInfo = that.getData(data.records);
          }
        })
      },
      changePageSize(pageSize) {
        this.searchInfo.pageSize = pageSize;
        this.search(this.searchInfo.current, 0);
      },
      getData(data) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].startTime != null && data[i].startTime != undefined) {
            data[i].startDate = this.timeFormat(data[i].startTime);
          }

          if (data[i].hopeTime != null && data[i].hopeTime != undefined) {
            data[i].hopeData = this.timeFormat(data[i].hopeTime);
          }

          if (data[i].actTime != null && data[i].actTime != undefined) {
            data[i].actDate = this.timeFormat(data[i].actTime);
          }

          if (data[i].deadline != null && data[i].deadline != undefined) {
            data[i].deadlineDate = this.timeFormat(data[i].deadline);
          }
        }
        return data;
        //this.netInfo = data;
        //console.log("=====this.netInfo=======",this.netInfo);
      },
      timeFormat(time) {
        if (time == 0) {
          return "";
        } else {
          var date = new Date(time * 1000);
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var day = date.getDate();
          return year + "-" + month + "-" + day;
        }

      },
      startDateFormat(data) {
        this.searchInfo.startTime = "";
        //console.log("----------",data);
        if (data != "" && data != null) {
          var temp = data + " 00:00:00"
          var date = new Date(temp);
          var startTime = (date.getTime() / 1000);
          this.searchInfo.startTime = startTime + "";
        }
        //console.log("-----this.searchInfo.startTime-----",this.searchInfo.startTime);
      },
      endDateFormat(data) {
        this.searchInfo.deadline = "";
        if (data != "" && data != null) {
          var temp = data + " 23:59:59"
          var date = new Date(temp);
          var deadline = (date.getTime() / 1000);
          this.searchInfo.deadline = deadline;
        }
        //console.log("-----deadline-----",this.searchInfo.deadline);
      },
      toPage(row) {
        //console.log("----row--------",row);
        var isName = false
        var key = ""
        if (row.task_def_key != null) {
          key = row.reqId + row.task_def_key
        } else {
          key = row.reqId + ''
        }
        this.tabs.list.some(item => {
          if (item.tabKey === key) {
            isName = true
            return
          }
        })
        if (!isName) {
          var title = "";
          if (this.searchInfo.serviceType == "net") {
            title = "工单详情 / 网略策略";
          } else {
            title = "工单详情 / 网略映射";
          }
          this.tabs.list.push({
            title: title,
            key: "handle",
            tabKey: key,
            params: {
              serviceType: row.serviceType,
              reqId: row.reqId,
              status: this.clickid,
              taskDefKey: row.task_def_key
            }
          })
        }
        this.tabs.isEdit = ""
        this.tabs.lastPage = this.tabs.tabsPage
        this.tabs.tabsPage = key
        this.$store.commit("tabs", this.tabs);
      },
      exportData() {
        if (this.netInfo == undefined || this.netInfo == null || this.netInfo.length < 1) {
          this.$Message.error("暂无网络策略信息可导出!")
        } else {
          var json = JSON.stringify(this.searchInfo);
          var params = JSON.parse(json);
          params.current = 1;
          params.pageSize = 1000;
          var that = this;
          var url = this.CONFIG.progress_url + '/net-manager';
          ajax.get({
            url: url,
            that: that,
            params: params,
            success: function(data) {
              //console.log("-----data------",data);
              that.exportDatas = that.getData(data.records);
              that.$refs.table.exportCsv({
                filename: '网络策略管理信息',
                columns: that.columns.filter((col, index) => index < 10),
                data: that.setExportDatas(that.exportDatas)
              });
            }
          })
        }
      },
      setExportDatas(exportDatas) {
        var json = JSON.stringify(exportDatas);
        var data = JSON.parse(json);

        data.forEach(item => {
          console.log("item", item);
          item.reqId = "\t" + item.reqId;
        })

        return data;
      }
    }
  }
</script>
